<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div class="p-15" *ngIf="templateConfigs">
    <div fxFlex="100" fxLayout="column">
        <h4>Basics</h4>
        <mat-form-field fxFlex color="accent">
            <mat-label>Template name</mat-label>
            <input
                [(ngModel)]="template.templateName"
                matInput
                name="templateName"
                class="sp"
                required
                data-cy="template-name"
            />
        </mat-form-field>
        <mat-form-field fxFlex color="accent">
            <mat-label>Template description</mat-label>
            <input
                [(ngModel)]="template.templateDescription"
                matInput
                name="templateDescription"
                class="sp"
                required
                data-cy="template-description"
            />
        </mat-form-field>
        <mat-divider class="divider"></mat-divider>
        <h4>Configuration</h4>
        <mat-hint style="margin-bottom: 10px"
            >(dynamic options cannot be saved and are hidden)</mat-hint
        >
        <div
            fxLayout="column"
            *ngFor="
                let config of staticProperties | pipelineElementTemplatePipe
            "
            class="static-property-panel static-property-panel-border"
        >
            <div fxLayout="row">
                <div fxFlex="50">
                    {{ config.label }}
                </div>
                <div fxFlex="50">
                    <sp-pipeline-element-template-config-item
                        [sp]="config"
                        [templateConfigs]="templateConfigs"
                    >
                    </sp-pipeline-element-template-config-item>
                </div>
            </div>
        </div>
        <mat-divider class="divider"></mat-divider>
        <h4>Existing templates</h4>
        <div
            fxLayout="column"
            *ngFor="let template of existingTemplates"
            class="static-property-panel static-property-panel-border"
        >
            <div fxFlex="100" fxLayout="row">
                <div fxFlex fxLayoutAlign="start center">
                    {{ template.templateName }}
                </div>
                <div fxLayoutAlign="end center">
                    <button
                        mat-icon-button
                        color="accent"
                        (click)="deleteTemplate(template.elementId)"
                        data-cy="delete-pipeline-element-template"
                    >
                        <mat-icon>delete</mat-icon>
                    </button>
                </div>
            </div>
        </div>
        <mat-hint
            style="margin-bottom: 10px"
            *ngIf="existingTemplates.length === 0"
            >(no templates available)</mat-hint
        >
    </div>
</div>
